<template>
  <div>
    <h1>书城后台管理</h1>
  <div style="margin-left: 66%">

    <font>欢迎：</font>
    <router-link to="userSelf"  @mouseover="hover">
    <el-avatar :src="$store.state.user.list.head"></el-avatar></router-link>
<!--    <img src="static/微信图片_20210731215732.jpg">-->
<!--    {{$store.state.user.list.uid}}-->
    <div id="div1" ref="div1" style="display:none">
      <menu>
        <a href="#" >个人信息</a><br/>
        <a href="#" >修改密码</a><br/>
      </menu>
    </div>
    &nbsp;&nbsp;&nbsp;&nbsp;{{$store.state.user.list.name}}&nbsp;&nbsp;&nbsp;&nbsp;

<!--    <router-link to="userSelf" >-->
<!--      <el-avatar :src="$store.state.user.list.head"></el-avatar>-->
<!--      {{$store.state.user.list.username}}-->
<!--    </router-link>-->

    <router-link to="/" tag="a"> <span>退出</span></router-link>
  </div>

<!--   {{$store.state.loginUser.head}} <img :src="$store.state.loginUser.head"/>-->

  <el-row class="tac" style="width: 28%;margin-left: -2%;float: left">
    <el-col :span="12"  >
      <h5>后台管理</h5>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose">
<!--        <el-submenu index="abc">-->
<!--          <template slot="title">-->
<!--            <i class="el-icon-location"></i>-->
<!--            <span>图书</span>-->
<!--          </template>-->
<!--          <el-menu-item-group>-->
<!--            <el-menu-item-group title="图书相关">-->
<!--            <el-menu-item index="1-1"><router-link to="books" tag="font">图书管理</router-link></el-menu-item>-->
<!--            <el-menu-item index="1-2"><router-link to="texture" tag="font">图书纸张管理</router-link></el-menu-item>-->
<!--            <el-menu-item index="1-3"><router-link to="inventory" tag="font">图书库存明细</router-link></el-menu-item>-->
<!--              <el-menu-item index="1-3"><router-link to="author" tag="font">作者管理</router-link></el-menu-item>-->
<!--            </el-menu-item-group>-->
<!--          </el-menu-item-group>-->
<!--          <el-menu-item-group title="出版社">-->
<!--            <el-menu-item index="1-3"><router-link to="publisher" tag="font">出版社管理</router-link></el-menu-item>-->
<!--          </el-menu-item-group>-->
<!--          <el-submenu index="1-4">-->
<!--            <template slot="title"><router-link to="adu" tag="font">增删改测试</router-link></template>-->
<!--            <el-menu-item index="1-4-1"><router-link to="bookt" tag="font">图书测试</router-link></el-menu-item>-->
<!--          </el-submenu>-->
<!--        </el-submenu>-->
<!--        <el-menu-item index="2">-->
<!--          <i class="el-icon-menu"></i>-->
<!--          <span slot="title">用户</span>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="3">-->
<!--          <i class="el-icon-document"></i>-->
<!--          <span slot="title">员工</span>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="4">-->
<!--          <i class="el-icon-setting"></i>-->
<!--          <span slot="title">权限</span>-->
<!--        </el-menu-item>-->
<!--        <el-submenu index="1-5">-->
<!--          <template slot="title"> <i class="el-icon-location"></i><router-link to="adu" tag="font">菜单</router-link></template>-->
<!--          <el-menu-item v-for="(item) in menu1" :key="item.name">-->
<!--            <i class="el-icon-setting"></i>-->
<!--            <router-link :to="item.url" tag="font" v-if="item.url!=undefined">{{item.name}}</router-link>-->
<!--          </el-menu-item>-->
<!--        </el-submenu>-->
<!--        <el-submenu index="1-6-1-1" v-for="(item) in menu1" :key="item.name" v-if="item.son===0">{{item.name}}</el-submenu>-->

<!--        <el-submenu index="1-6">-->
<!--          <template slot="title"> <i class="el-icon-location"></i>-->
<!--            菜单-->
<!--          </template>-->
<!--        &&$store.state.loginUser.rid===-->

          <el-submenu :index="item.mid+''" v-for="(item) in menu1" :key="item.name" v-if="item.son===0">
            <template slot="title">
              <i :class=item.ikun></i>
<!--              {{item.ikun}}-->
              {{item.name}}
            </template>
            <el-menu-item v-for="(item2) in menu1" v-if="item2.son===item.mid" :key="item2.name">
<!--              <i class="el-icon-setting"></i>-->
<!--              <i :class=item2.ikun></i>-->
              <router-link :to="item2.url" tag="font" v-if="item2.url!=undefined">{{item2.name}}</router-link>
            </el-menu-item>
          </el-submenu>

<!--        </el-submenu>-->

      </el-menu>
    </el-col>
  </el-row>

    <div style="position:absolute;margin-left: 12%">
      <div class="view">
        <router-view></router-view>
      </div>
    </div>
    <div style="position: relative;top: 20%;left: 20%">当前是：{{nowTime}}</div>
<!--    <img :src="$store.state.loginUser.head">-->
  </div>
</template>

<script>
export default {
  name: 'MainD',
  data() {
    return {
      nowTime:'',
      src1: require('../assets/微信图片_20210731215732.jpg'),
      menu:[],
      menu1:{
        mid:'',
        name:'',
        son:'',
        url:'',
        state:'',
        ikun:'',
      }
    }
  },
  created () {
    this.$http.post('/menu/select').then(data=>{
      console.log(data);
      this.menu = data;
       this.menu1=data;
    });
    this.timeFormate(new Date());
    this.nowTimes();
    this.clear();
  },
  methods: {
    //显示当前时间（年月日时分秒）
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
      let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
      let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
      let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
      let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
      let week = new Date(timeStamp).getDay();
      let weeks = ["日","一","二","三","四","五","六"];
      let getWeek = "星期" + weeks[week];
      this.nowTime = year + "年" + month + "月" + date +"日"+" "+hh+":"+mm+':'+ss+getWeek  ;
    },
    nowTimes(){
      this.timeFormate(new Date());
      setInterval(this.nowTimes,1000);
      this.clear()
    },
    clear(){
      clearInterval(this.nowTimes)
      this.nowTimes = null;
    },

    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    hover(){
      alert(33);
      this.$refs.div1.style.cssText='display:inline-block';
    },

  }
}
</script>

<style scoped>

</style>
